<!doctype html>
<html lang="en">

<head>
    <title>xx烧烤店，不一样的美味体验！</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./home.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <style>
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div id="demo" class="carousel slide " data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner ">
                        <div class="carousel-item active">
                            <img class=" img-fluid w-100" src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
                            <div class="carousel-caption">
                                <h3>第一张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class=" img-fluid w-100" src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
                            <div class="carousel-caption">
                                <h3>第一张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img class=" img-fluid w-100" src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
                            <div class="carousel-caption">
                                <h3>第一张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <ul class="nav nav-tabs" id="myTab" role="tablist">

                    <li class="nav-item ">
                        <a class="nav-link " id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">菜类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">酒水主食</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="media border p-3 mt-3">
                            <img src="" alt="图片" class="img-fluid  rounded-circle align-self-center">
                            <div class="media-body">
                                <h4>肉</h4>
                                <p>吃肉肉！！！</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div class="media border p-3 mt-3">
                            <img src="" alt="图片" class="img-fluid  rounded-circle align-self-center">
                            <div class="media-body">
                                <h4>菜</h4>
                                <p>吃菜菜！！！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <!-- <div class="media border p-3">
                    <img src="mobile-icon.png" alt="图片" class=" rounded-circle align-self-center" style="width:60px;">
                    <div class="media-body">
                        <h4>肉</h4>
                        <p>吃肉肉！！！</p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <footer class="row text-center">
        <div class="col-3">
            <a name="" id="" class="btn " href="#" role="button">
                <i class="iconfont icon-sousuo"></i>
            </a>

        </div>
        <div class="col-3">
            <a name="" id="" class="btn " href="#" role="button">
                <i class="iconfont icon-gouwuche "></i>
            </a>

        </div>
        <div class="col-3">
            <a name="" id="" class="btn " href="#" role="button">
                <i class="iconfont icon-wodedingdan"></i>
            </a>

        </div>
        <div class="col-3">
            <a name="" id="" class="btn " href="#" role="button">
                <i class="iconfont icon-wodejuhuasuan"></i>
            </a>

        </div>

    </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script>
        $(function () {
            $('#myTab li:eq(1) a').tab('show');
        });
    </script>
</body>

</html>